<template>
  <div class="container">

    <page-header/>
    <el-menu
      :default-active="selectPosition+''"
      class="el-menu-demo"
      mode="horizontal"
      @select="menuSelected"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item :index="index+''" v-for="(item,index) in homeClassify" v-bind:key="index">
        <el-link :href="index < homeClassify.length - 1 ? '/?i='+index : '/classify'">{{item.channel_name}}</el-link>
      </el-menu-item>
    </el-menu>

    <div v-for="(item,index) in homeContent" v-bind:key="index">
      <HomeBanner v-if="item.style===1" :data="item"></HomeBanner>
      <splite2-view v-if="item.style === 6" :data="item"></splite2-view>
      <splite3-view v-if="item.style === 11 || item.style === 7" :data="item"></splite3-view>
      <splite3-big-view v-if="item.style === 8" :data="item"></splite3-big-view>
    </div>

  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import axios from "axios";
  import PageHeader from "~/components/PageHeader.vue";

  export default Vue.extend({
    components: {PageHeader},
    head:{
      title:"视频站首页"
    },
    data() {
      return {}
    },
    methods: {
      menuSelected: function (index: number) {
      }
    },
    async asyncData({query}) {
      let selectIndex: number = query.i === undefined ? 0 : parseInt(query.i + '');
      let homeClassify = await axios.get('http://47.117.121.53:8080/down/daHai/homeClassify');
      let select = homeClassify.data.data.result[selectIndex];
      let content = await axios.get('http://47.117.121.53:8080/down/daHai/homeContent?id=' + select.id);
      homeClassify.data.data.result.push({"channel_name": "分类"});

      return {
        homeClassify: homeClassify.data.data.result,
        homeContent: content.data.data.data,
        selectPosition: selectIndex
      }
    }
  });
</script>

<style lang="scss">
  @import "assets/index";
</style>
